@import "common.styl"

[v-cloak]{display:none}
a
  display inline-block

.navbar
  background #fff
  display flex
  position fixed
  top 0
  left 0
  right 0
  z-index 99
  height px2rem(43px)
  border-bottom 1px solid #e6e6e6
  .nav_item
    display block
    flex 1
    span
      display inline-block
      width px2rem(50px)
      height px2rem(43px)
      line-height px2rem(43px)
      position relative
  .nav_item.active
    span
      color #32a4f9
      &:after
        content ''
        position absolute
        left 0
        right 0
        bottom 0
        border 1px solid #32a4f9
.header
  .select
    height px2rem(35px)
    line-height px2rem(35px)
    border-bottom 1px solid #e6e6e6
    .triangle
      width 0
      height 0
      border-left 5px solid transparent
      border-right 5px solid transparent
      border-top 8px solid #2c3e50
      display inline-block
  ul.options
    padding px2rem(10px) 4vw 0
    flex-direction: row;
    flex-wrap: wrap;
    display none
    .option
      width 27vw
      height px2rem(35px)
      line-height px2rem(35px)
      border 1px solid #e6e6e6
      margin-right 5vw
      margin-bottom px2rem(10px)
      font-size px2rem(10px)
      border-radius px2rem(3px)
      &.active
        border 1px solid #32a4f9
        color #32a4f9
      &:nth-child(3n)
        margin-right 0
.client_wrap
  .total
    padding px2rem(10px)
    color #999
    font-size px2rem(10px)
  .client_item
    .item_wrap
      padding px2rem(5px) px2rem(10px)
      border-bottom 1px solid #e6e6e6
      &:last-child
        border-bottom 0
      .avatar
        width px2rem(50px)
        height px2rem(50px)
        margin-right px2rem(10px)
        img
          width 100%
          height 100%
      .name,.status
        margin-top px2rem(2px)
        font-size px2rem(13px)
      .blue
        color #32a4f9
        font-size px2rem(11px)
        margin-top px2rem(5px)
      .date
        font-size px2rem(11px)
        color #999
        margin-top px2rem(2px)


.add-label
  padding px2rem(7px) px2rem(10px)
  color #32a4f9
  border-bottom 1px solid #e6e6e6
  .ra-add
    font-size px2rem(16px)
    margin-right px2rem(5px)
.label-wrap
  padding px2rem(10px) px2rem(15px)
  border-bottom 1px solid #e6e6e6
  .other
    padding-bottom px2rem(10px)
    padding-left 10px
    position relative
    color #D84C29
    &:after
      position absolute
      left 0
      top 5px
      width 7px
      height 7px
      border-radius 50%
      background #D84C29
      content ''
  ul
    .label
      height 30px
      line-height 30px
      border-radius 15px
      background #fee7e1
      display inline-block
      padding 0 px2rem(12px)
      margin-right px2rem(5px)
      margin-top px2rem(5px)

.other.blue
  color #218dfc
  &:after
    background #218dfc
.label-wrap ul .label.b-label
  background rgba(33,141,252,.2)


.tags_wrap
  padding px2rem(15px)
  .tags_item
    .title
      padding-left px2rem(15px)
      position relative
      &:after
        position absolute
        left 3px
        top 6px
        content ''
        width 5px
        height 5px
        border-radius 50%
        background #6ea3ef
    .tags_ul
      margin-top px2rem(10px)
      .tag
        text-align center
        float left
        background #eaeaea
        margin-right 5px
        margin-bottom 10px
        font-size px2rem(10px)
        border-radius: 15px;
        padding: 5px 10px;
        &:nth-child(3n)
          margin-right 0
      .tag.active
        background rgba(110,163,239,.3)
        color #6ea3ef